<template>
        <div class="dl">
            <div class="dl1">
                <div class="login_form">   
                    <div class="user_input">
                        账号：
                    <input type="text" style="border-radius: 4px;height:80%;width:70%"  placeholder="用户名" v-model="userName">
                    </div>
                    <div class="user_input">
                        密码：
                    <input type="password"  style="border-radius: 4px;height:80%;width:70%"  placeholder="密码" v-model="password">
                    </div>
                    <div style="padding-top: 8%;">
                        <el-button class="login_btn"  @click.native="login" round round :loading="isBtnLoading">
                                登录
                        </el-button>
                    </div>
                    <div style="height: 30px;position: absolute;bottom: 0px;width: 80%;">
                        <div style="float: left;" class="bottom_btn" @click="register">新用户注册</div>
                        <div style="float: right;"  class="bottom_btn" @click="fp">忘记密码</div>
                    </div>
                </div>
            </div> 
        </div>
</template>
<script>
export default {
    methods:{
        login(){
        this.$router.push({name:"OperationPlatform"})
        },
        register(){
            alert(1)
        },
        fp(){
            alert(2)
        }
    }
}
</script>
<style scoped>
.dl{
    
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: brown;
    background-image: url(../assets/backImage.png);
    background-repeat:no-repeat;
	background-size:100% 100%;
	/* -moz-background-size:100% 100%;  */ 
}
.dl1{
    width: 380px;
    height: 250px;
   
}
 .login_form {
    padding-top: 10%;
    padding-left: 10%;
    padding-right: 10%;
    height: 100%    ;
    font-family: Open Sans,Arial,Helvetica,sans-serif;
    color: #333;
    border: 1px solid #ccc;
    /* background-color: #fff; */
    box-shadow: 0.33px 2px 12px rgba(0, 0, 0, 0.3);
    border-radius: 9px;
    position: relative;
 }

.user_input{
    margin-bottom: 20px;
    height: 15%;
}
.login_btn{
    width: 120px; 
}
.bottom_btn{
background-color:rgb(240, 169, 218);
border-radius: 5px;
width: 100px;
cursor: pointer;
}
.sds{
    color: rgb(240, 169, 218);
}
</style>